<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css"/>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
 		<div class="g-bd1 f-cb">
		    <div class="g-sd1">
		        <div class="menu-left">
		            <table>
		                <tr>
		                    <td><div class="item">English</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Science</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Music</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">History</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Computer</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Mathematics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Arts</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		                <tr>
		                    <td><div class="item">Ethics</div></td>
		                </tr>
		            </table>
		 		</div>
		    </div>
		    <div class="g-mn1">
		        <div class="g-mn1c">
			 		<div class="menu-right-box">
			 			<div class="item-menus">
			 				<ul>
			 					<li><a href="javascript:void(0);" onclick="list_add(this);">添加</a></li>
			 				</ul>
			 			</div>
			        	<div class="remove-item">回收站</div>
				 		<div class="menu-tool-bottom">
							<ul>
							</ul>
						</div>
				 		<div class="menu-right">
				 			<div class="list-box">
						        <div class="list">
						        	<ul>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        	</ul>
						        	<ul>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        		<li class="drop"></li>
						        	</ul>
						        </div>
				 			</div>
				 		</div>
			 		</div>
			 		<div class="menu-tool-left" onclick="direction_left_click(this);"></div>
			 		<div class="menu-tool-right" onclick="direction_right_click(this);"></div>
		        </div>
		    </div>
		</div>
 		
    <style type="text/css">
    	*{
			margin: 0;
			padding: 0;
		}
		.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
		.g-mn1{float:right;width:100%;}
		.g-mn1c{margin-left:200px;}
		.list-box{
			position: relative;
		}
		.menu-tool-bottom{
		    position: relative;
        	left:0;
        	top: 220px;
        	height: 20px;
        	line-height: 32px;
        	color: red;
        	text-align: center;
		}
		.menu-tool-bottom ul{
			position: absolute;
			left:50%;
			margin-left:-50px;
		}
		.menu-tool-bottom ul li {
			list-style: none;
			cursor: pointer;
			margin-right: 10px;
			width: 20px;
			height: 20px;
			position: relative;
			text-align: center;
			float: left;
			color: black;
		}
		
		.menu-tool-bottom ul li .d-bg {
			display: block;
			opacity: 0.4;
			filter: alpha(opacity = 40);
			position: absolute;
			width: 20px;
			height: 20px;
			border-radius: 10px;
			top: 0;
			left: 0;
		}
		
		.menu-tool-bottom ul li .d-txt {
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
		}
		
		.menu-tool-bottom ul li .c-active {
			border-radius: 10px;
			opacity: 0.4;
			filter: alpha(opacity = 40);
			background: black;
		}
		
		.menu-tool-bottom ul li:hover {
			border-radius: 10px;
			opacity: 0.4;
			filter: alpha(opacity = 40);
			background: black;
			color: white;
		}
		.menu-tool-left{
			position: absolute;
			top:140px;
			left:210px;
			width: 10px;
			height: 14px;
			cursor: pointer;
			background: url(themes/bootstrap/images/pagination_icons.png) -18px top no-repeat;
		}
		.menu-tool-right{
			position: absolute;
			top:140px;
			right:54px;
			width: 10px;
			height: 14px;
			cursor: pointer;
			background: url(themes/bootstrap/images/pagination_icons.png) -35px top no-repeat;
		}
		.menu-box{
			position: relative;
		}
		.menu-left{
			width: 200px;
			height: 300px;
			overflow: auto;
			float: left;
			border: 1px solid #CCCCCC;
		}
		.menu-right-box{
			position: relative;
		}
        .menu-left table{
        	width: 100%;
            background:#E0ECFF;
        }
        .menu-left td{
            background:#eee;
        }
        .item{
            text-align:center;
            border:1px solid #499B33;
            background:#fafafa;
            height:30px;
            line-height: 30px;
            color:#444;
            width:176px;
        }
        .item:hover{
        	background: #CCCCCC;
        }
		.menu-right{
			position: absolute;
			width: 760px;
			height: 300px;
			overflow: hidden;
			left:50%;
			margin-left:-400px;
			z-index: -1;
			top:100px;
		}
		.menu-right .list ul{
			float: left;
			width: 760px;
			height: 100px;
		}
		.menu-right .list ul li{
			float: left;
			list-style: none;
			margin:4px 0;
			width: 178px;
			height: 32px;
			border: 1px solid #666666;
			padding: 2px;
			background: white;
			margin-left: 4px;
		}
        .menu-right table{
            background:#E0ECFF;
            width:100%;
        }
        .menu-right td{
            background:#fafafa;
            color:#444;
            text-align:center;
            padding:2px;
        }
        .menu-right td{
            background:#E0ECFF;
        }
        .menu-right td.drop{
            background:#fafafa;
            width:200px;
            height: 30px;
        }
        td.over{
            background:#FBEC88;
        }
        .assigned{
            border:1px solid #BC2A4D;
        }
        .trash{
            background-color:red;
        }
        .remove-item{
        	position: absolute;
        	left:50%;
        	margin-left:-100px;
        	top: 260px;
        	width: 178px;
        	height: 32px;
        	line-height: 32px;
        	color: red;
        	text-align: center;
        	border: 1px solid red;
        }
        .item-menus{
        	position: absolute;
        	top:40px;
        	right: 100px;
        }
    </style>
    <script>
        $(function(){
        	$('.menu-right .list ul').each(function(){
				$('<li onclick="menu_index_click(this);"><span class="d-bg'+($(this).index()==0?' c-active':'')+'"></span><span class="d-txt">'+($(this).index()+1)+'</span></li>').appendTo($('div.menu-tool-bottom ul'));
			});
        	$('.menu-right .list').width(760*$('.menu-right ul').length);
            $('.menu-left .item').draggable({
                revert:true,
                proxy: 'clone'
            });
            $('.menu-right .drop').droppable({
                accept: '.item',
                onDragEnter:function(){
                    $(this).addClass('over');
                },
                onDragLeave:function(){
                    $(this).removeClass('over');
                },
                onDrop:function(e,source){
                	$(this).empty();
                    $(this).removeClass('over');
                    if ($(source).hasClass('assigned')){
                        $(this).append(source);
                    } else {
                        var c = $(source).clone().addClass('assigned');
                        $(this).empty().append(c);
                        c.draggable({
                            revert:true
                        });
                    }
                }
            });
            $('.remove-item').droppable({
                accept: '.assigned',
                onDrop:function(e,source){
                    $(source).remove();
                }
            });
        });
        
        function list_add(){
        	var $box = $('.list-box .list');
        	$box.width($box.width()+760);
        	var p = $('.menu-tool-bottom ul li:first').clone();
        	p.find('.c-active').removeClass('c-active');
        	p.find('.d-txt').text($('.menu-tool-bottom ul li').length+1);
        	p.appendTo($('.menu-tool-bottom ul'));
        	$('.list-box .list ul:first').clone().each(function(){
        		$(this).find('li').each(function(){
        			$(this).empty();
        		});
        	}).appendTo($('.list-box .list'));
        }
        
        function menu_list_item_enter_or_leave(){
			var $self = $(arguments[0]);
			if($self.attr('disabled')){
				return;
			}
			$self.find('span.c-txt').toggleClass('enter');
		}
		
		function menu_index_click(){
			var $self = $(arguments[0]);
			
			sign_left_right = -($self.index())*760;
			$('div.menu-right .list-box').animate({
				'left':sign_left_right
			},{
				duration: 600,
				easing:'easeOutBounce'
			});
			$self.parent().find('.c-active').toggleClass('c-active');
			$($self).find('.d-bg').toggleClass('c-active');
		}
		
		
		var sign_left_right = 0;
		function direction_left_click(){
			var $self = $(arguments[0]);
			var $move_box = $('div.menu-right');
			var move_box_width = $move_box.width();
			var indexs = $('div.menu-tool-bottom span.d-bg');
			if(indexs.filter('.c-active').parent().index()>0){
				indexs.filter('.c-active').toggleClass('c-active').parent().prev().find('.d-bg').toggleClass('c-active');
				sign_left_right+=move_box_width;
			}else{
		    	if(!$('div.list-box').is(':animated')){
					for(var i=1; 4>=i; i++){
				    	$('div.list-box').animate({left:(40-10*i)},50).animate({left:2*(40-10*i)-1},50);
				    }
		    	}
			}
			$('div.menu-right .list').animate({
				'margin-left':sign_left_right
			},{
				duration: 600,
				easing:'easeInOutCirc'
			});
			
		}
		
		
		function direction_right_click(){
			var $self = $(arguments[0]);
			var $move_box = $('div.menu-right');
			var move_box_width = $move_box.width();
			var indexs = $('div.menu-tool-bottom span.d-bg');
			if(indexs.filter('.c-active').parent().index()!=(indexs.length-1)){
				indexs.filter('.c-active').toggleClass('c-active').parent().next().find('.d-bg').toggleClass('c-active');
				sign_left_right-=move_box_width;
			}else{
				if(!$('div.list-box').is(':animated')){
					for(var i=1; 4>=i; i++){
				    	$('div.list-box').animate({left:(40-10*i)},50).animate({left:2*(40-10*i)-1},50);
				    }
				}
			}
			$('div.menu-right .list').animate({
				'margin-left':sign_left_right
			},{
				duration: 600,
				easing:'easeInOutCirc'
			});
			
		}
    </script>
	</body>
</html>
